<template>
  <div class="receivablesCollection-box">
    <div class="box-header">
      <h5>账款回收比例分布</h5>
      <div class="timeQuery">
        <el-select
          v-model="firmOptionValue"
          placeholder="Select"
          size="large"
          style="width: 240px"
        >
          <el-option
            v-for="item in firmOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
    <div ref="target" class="content"></div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts'
import { ref, onMounted, watch } from 'vue'
const firmOptionValue = ref('南阳分公司')
const firmOption = [
  {
    value: '南阳分公司',
    label: '南阳分公司',
  },
  {
    value: '郑州分公司',
    label: '郑州分公司',
  },
  {
    value: '新媒体信息化公司',
    label: '新媒体信息化公司',
  },
  {
    value: '武汉分公司',
    label: '武汉分公司',
  },
  {
    value: '营销策划公司',
    label: '营销策划公司',
  },
  {
    value: '浙闽分公司',
    label: '浙闽分公司',
  },
  {
    value: '西北公司',
    label: '西北公司',
  },
  {
    value: '户外媒体',
    label: '户外媒体',
  },
  {
    value: '资质管理',
    label: '资质管理',
  },
  {
    value: '北京海南',
    label: '北京海南',
  },
  {
    value: '车间加工厂',
    label: '车间加工厂',
  },
  {
    value: '投资控股公司',
    label: '投资控股公司',
  },
  {
    value: '工程项目',
    label: '工程项目',
  },
]
// const props = defineProps({
//     data: {
//         type: Object,
//         required: true,
//     },
// });
let target = ref(null)
let myChart = null
onMounted(() => {
  myChart = echarts.init(target.value)
  renderChart()
})
var demoData = [
  {
    name: 'CNC-1',
    unit: '%',
    value: 68,
  },
]
let options = {
  series: (function () {
    var result = []

    demoData.forEach(function (item) {
      result.push(
        {
          name: item.name,
          type: 'gauge',
          radius: '47.10%',
          startAngle: 225,
          endAngle: -45,
          min: 0,
          max: 100,
          axisLine: {
            show: true,
            lineStyle: {
              width: 50,
              color: [
                [
                  item.value / 100,
                  new echarts.graphic.LinearGradient(0, 1, 1, 0, [
                    {
                      offset: 0,
                      color: 'rgba(8,148,246)',
                    },
                    {
                      offset: 0.3,
                      color: 'rgba(255, 36, 74,0)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(255, 36, 74,1)',
                    },
                  ]),
                ],
                [1, 'rgba(255,255,255,.0)'],
              ],
            },
          },
          axisTick: {
            show: 0,
          },
          splitLine: {
            show: 0,
          },
          axisLabel: {
            show: 0,
          },
          pointer: {
            show: true,
            length: '100%',
          },
          detail: {
            show: true,
            offsetCenter: [0, '70%'],
            textStyle: {
              fontSize: 24,
              color: '#ff244a',
            },
            formatter: ['{value}' + (item.unit || ''), '{name|' + item.name + '}'].join('\n'),
            rich: {
              name: {
                fontSize: 20,
                lineHeight: 60,
                color: '#fff',
                fontWeight: '100',
              },
            },
          },
          itemStyle: {
            color: 'rgba(255, 36, 74,.3)',
            borderColor: 'rgba(255, 36, 74,1)',
          },
          data: [
            {
              value: item.value,
            },
          ],
        },
        {
          name: item.name,
          type: 'gauge',
          radius: '47.10%',
          startAngle: 225,
          endAngle: -45,
          min: 0,
          max: 100,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: 0,
          },
          splitLine: {
            show: 0,
          },
          axisLabel: {
            show: 0,
          },
          pointer: {
            show: true,
            width: 1,
            length: '100%',
          },
          detail: {
            show: false,
          },
          itemStyle: {
            color: 'rgba(255, 36, 74,1)',
          },
          data: [
            {
              value: item.value,
            },
          ],
        },
        {
          type: 'gauge',
          radius: '80%',
          splitNumber: 10,
          min: 0,
          max: 500,
          startAngle: 225,
          endAngle: -45,
          axisLine: {
            show: true,
            lineStyle: {
              width: 5,
              color: [
                [0, 'transparent'],
                [0.1, '#0894f6'],
                [0.11, 'transparent'],
                [0.2, '#0894f6'],
                [0.21, 'transparent'],
                [0.3, '#0894f6'],
                [0.31, 'transparent'],
                [0.4, '#0894f6'],
                [0.41, 'transparent'],
                [0.5, '#0894f6'],
                [0.51, 'transparent'],
                [0.6, '#0894f6'],
                [0.61, 'transparent'],
                [0.7, '#0894f6'],
                [0.71, 'transparent'],
                [0.8, '#fd0001'],
                [0.81, 'transparent'],
                [0.9, '#fd0001'],
                [0.91, 'transparent'],
                [1, '#fd0001'],
              ],
            },
          },
          axisLabel: {
            formatter: function (e) {
              switch (e + '') {
                case '20':
                  return '经营目标'
                case '80':
                  return '突破目标'
                default:
                  return e
              }
            },
            textStyle: {
              fontSize: 12,
              fontWeight: '',
            },
          },
          splitLine: {
            length: 20,
            lineStyle: {
              color: 'auto',
            },
          },
          axisTick: {
            length: 10,
            lineStyle: {
              color: 'auto',
            },
          },
          pointer: {
            show: 0,
          },
          detail: {
            show: 0,
          },
        },
      )
    })

    return result
  })(),
}

const renderChart = () => {
  myChart.setOption(options)

  // 图表自适应
  window.addEventListener('resize', () => {
    myChart.resize()
  })
}
</script>
<style scoped lang="scss">
.receivablesCollection-box {
  width: 100%;
  height: 100%;
  cursor: pointer;

  h5 {
    position: relative;
    font-family:
      PingFang SC,
      PingFang SC;
    font-weight: bold;
    font-size: 20px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin: 40px 0;

    &::after {
      content: '';
      width: 5px;
      height: 20px;
      background-color: #1947ff;
      border-radius: 5px;
      position: absolute;
      left: -9px;
      top: 0px;
    }
  }

  .box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    padding-right: 50px;
    .timeQuery {
      border: 1px solid #707070;
      width: 135px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 2px 2px 2px 2px;

      p {
        width: 194px;
        height: 28px;
        text-align: center;
        line-height: 28px;
      }

      :deep(.el-input__wrapper) {
        background: #e2e7ff;
        box-shadow: inset -1px -1px 2px 1px rgba(0, 0, 0, 0.16);
        border-radius: 2px 2px 2px 2px;
      }
      :deep(.el-input__inner) {
        color: #1947ff;

      }
    }
  }

  .content {
    width: 100%;
    height: calc(100% - 86px);
  }
}
</style>
